<template>
  <div>
    <div>
      <input type="text" v-model="user.id">
      <input type="text" v-model="user.name">
      <button @click="addItem">提交</button>
    </div>
    <ul>
      <li v-for="item in state.arr" :key="item.id" @click="handleDelete(item.id)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
// !组合 API：更方便同一功能的数据和业务逻辑的复用和维护
import { useDeleteItem, useAddItem } from './hooks'
export default {
  setup() {
    const { state, handleDelete } = useDeleteItem()
    const { user, addItem } = useAddItem(state)
    return {
      state,
      handleDelete,
      user,
      addItem
    }
  }
}
</script>

<style lang="scss" scoped></style>